<script lang="jsx" setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue';
import { accountDeleteListService, accountGetByCondService, accountGetListService, accountPostService } from '@/api/account';
import { permissionGetListService } from '@/api/permission';

const columns = ref([
  {
    dataKey: "id",
    title: "管理员id",
    width: 100
  },
  {
    dataKey: "name",
    title: "名字",
    width: 100
  },
  {
    dataKey: "createdTime",
    title: "注册时间",
    width: 200
  }
])

const getAccountList = async() => {
  return await accountGetListService()
}

const onDelete = async(rowId) => {
  return await accountDeleteListService(rowId);
}

/* 搜索账户 */
const searchPair = {
  "管理员id": "id",
  "名字": "name",
  "注册时间": "createdTime"
}

const onSearch = async(formObj) => {
  return await accountGetByCondService(formObj);
}


/* 点击创建按钮 */
const allPermissionList = ref([])
const onClickCreate = async() => {
  const res = await permissionGetListService();
  allPermissionList.value = res.data.data;
}

/* 点击确认创建按钮 */
const onConfirmCreate = async() => {
  await accountPostService(createformModel.value);
}

/* 创建账户 */
const createformModel = ref({
  name: '',
  password: '',
  permissionList: []
})

const rules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

</script>

<template>
  <table-warpper 
    :select-data="getAccountList" :delete-data="onDelete" :columns="columns" 
    :search-pair="searchPair" :search-data="onSearch" search-title="搜索账户" 
    @click-create="onClickCreate" @confirm-create="onConfirmCreate" create-title="创建用户"
  >
    <template #create>
      <el-form class="create-form" :model="createformModel" :rules="rules" ref="form" size="large" autocomplete="off" @submit.prevent>
        <el-form-item prop="name">
          <el-input
            v-model="createformModel.name"
            :prefix-icon="User"
            placeholder="用户名"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="createformModel.password"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="permission-checkbox">
          权限
          <el-checkbox-group v-model="createformModel.permissionList">
            <el-checkbox :label="permission" :value="permission" v-for="permission in allPermissionList" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </template>
  </table-warpper>
</template>

<style lang="scss" scoped>
@use '/src/assets/variables.scss' as *;

.create-form {
  .permission-checkbox {
    margin-top: 30px;
  }
}
</style>